<template>
  <div>
    <FormContainer title="基本客户信息">
      <template #default>
        <el-descriptions :column="2" border>
          <template slot="extra">
            <el-button type="primary" size="small" @click="pageGoEdit">
              修改信息
            </el-button>
          </template>
          <el-descriptions-item>
            <template slot="label"> 编号 </template>
            {{ data.customerCode }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 姓名 </template>
            {{ data.customerName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 性别 </template>
            {{ data.sex == 1 ? "女" : "男" }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 年级 </template>
            {{ data.grade }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 校区 </template>
            {{ data.campusName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 教育顾问 </template>
            {{ data.educationalAdviserName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 家庭地址 </template>
            {{ data.address }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 手机 </template>
            {{ data.phone }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 签约状态 </template>
            {{ data.status === 0 ? "未签约" : "已签约" }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 固定电话 </template>
            {{ data.telephone }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 联系人1 </template>
            {{ data.contactsOne }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 联系人2 </template>
            {{ data.contactsTwo }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 在读学校 </template>
            {{ data.school }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 客户来源 </template>
            {{ data.sourceOfLeadCustomersName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 需辅导科目 </template>
            {{ data.course }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 首次接触日期 </template>
            {{ data.firstTime }}
          </el-descriptions-item>
        </el-descriptions>
      </template>
    </FormContainer>
    <FormContainer title="创建信息">
      <template #default>
        <el-descriptions :column="3" border>
          <el-descriptions-item>
            <template slot="label"> 创建时间 </template>
            {{ data.createTime || "-" }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 创建者 </template>
            {{ data.createBy || "-" }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 上传者 </template>
            {{ data.updateBy || "-" }}
          </el-descriptions-item>
        </el-descriptions>
      </template>
    </FormContainer>
    <FormContainer title="追踪 / 预约">
      <template #default>
        <el-descriptions :column="3" border>
          <template slot="extra">
            <el-button
              type="primary"
              size="small"
              @click="handleCreat('tracking')"
              >+ 追踪记录</el-button
            >
            <el-button
              type="primary"
              size="small"
              @click="handleCreat('reservation')"
              >+ 预约记录</el-button
            >
          </template>
        </el-descriptions>
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane label="追踪记录" name="first">
            <el-table :data="data.strackList" border stripe>
              <el-table-column label="序号" type="index" align="center" />
              <el-table-column label="追踪方式" align="center">
                <template #default="{ row }">
                  <span v-if="row.trackMethod === 0">电话</span>
                </template>
              </el-table-column>
              <el-table-column
                label="追踪记录"
                prop="trackingRecords"
                align="center"
                show-overflow-tooltip
                width="200"
              />
              <el-table-column label="追踪结果" align="center">
                <template #default="{ row }">
                  <span v-if="row.trackingResults === 0">继续电话</span>
                  <span v-else>预约成功</span>
                </template>
              </el-table-column>
              <el-table-column label="签约可能" align="center">
                <template #default="{ row }">
                  <span v-if="row.signingResults === 0">小</span>
                  <span v-else-if="row.signingResults === 1">中</span>
                  <span v-else>大</span>
                </template>
              </el-table-column>
              <el-table-column label="电话有效" align="center">
                <template #default="{ row }">
                  <span v-if="row.isValid === 1">是</span>
                  <span v-else>否</span>
                </template>
              </el-table-column>
              <el-table-column
                label="下次追踪日期"
                prop="nextTrackTime"
                align="center"
              />
              <el-table-column label="追踪者" prop="createBy" align="center" />
              <el-table-column
                label="创建时间"
                prop="createTime"
                align="center"
              />
              <el-table-column
                label="操作"
                align="center"
                width="150px"
                fixed="right"
              >
                <template #default="scope">
                  <el-popconfirm
                    title="确定删除吗？"
                    @confirm="handleDeleteTracking(scope.row.id)"
                  >
                    <el-button type="text" size="small" slot="reference">
                      删除
                    </el-button>
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="预约记录" name="second">
            <el-table :data="data.appointmentRecordList" border stripe>
              <el-table-column label="序号" type="index" align="center" />
              <el-table-column
                label="预约记录"
                prop="appointmentRecord"
                align="center"
              />
              <el-table-column
                label="预约时间"
                prop="appointmentTime"
                align="center"
              />
              <el-table-column
                label="预计时间(分)"
                prop="interviewTime"
                align="center"
              />
              <el-table-column label="签约可能" prop="isSign" align="center">
                <template #default="{ row }">
                  <span v-if="row.isSign === 0">小</span>
                  <span v-else-if="row.isSign === 1">中</span>
                  <span v-else>大</span>
                </template></el-table-column
              >
              <el-table-column label="创建者" prop="createBy" align="center" />
              <el-table-column
                label="创建时间"
                prop="createTime"
                align="center"
              />
              <el-table-column label="已上门" prop="isVisit" align="center">
                <template #default="{ row }">
                  <el-tag type="success" v-if="row.isVisit === 1"
                    >已上门</el-tag
                  >
                  <el-tag type="info" v-else>未上门</el-tag>
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                align="center"
                width="150px"
                fixed="right"
              >
                <template #default="scope">
                  <el-popconfirm
                    title="确定删除吗？"
                    @confirm="handleDeleteRecord(scope.row.id)"
                  >
                    <el-button
                      type="text"
                      size="small"
                      :disabled="scope.row.isVisit === 1"
                      slot="reference"
                    >
                      删除
                    </el-button>
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <!-- <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane> -->
        </el-tabs>
      </template>
    </FormContainer>

    <el-dialog
      :title="dialog.title"
      :visible.sync="dialog.visible"
      width="50%"
      center
      @close="handleClose"
    >
      <el-form
        :model="dialog.trackingForm"
        label-width="140px"
        v-if="dialog.type === 'tracking'"
      >
        <el-form-item label="追踪方式">
          <el-input value="电话" readonly />
        </el-form-item>
        <el-form-item label="追踪记录">
          <el-input
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 4 }"
            placeholder="请输入追踪记录"
            v-model="dialog.trackingForm.trackingRecords"
          />
        </el-form-item>
        <el-form-item label="追踪结果">
          <el-select
            v-model="dialog.trackingForm.trackingResults"
            placeholder="请选择追踪结果"
            clearable
          >
            <el-option label="继续电话" :value="0" />
            <el-option label="预约成功" :value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="签约可能">
          <el-select
            v-model="dialog.trackingForm.signingResults"
            placeholder="请选择签约可能"
            clearable
          >
            <el-option label="小" :value="0" />
            <el-option label="中" :value="1" />
            <el-option label="大" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="电话有效">
          <el-select
            v-model="dialog.trackingForm.isValid"
            placeholder="请选择电话有效"
            clearable
          >
            <el-option label="是" :value="1" />
            <el-option label="否" :value="0" />
          </el-select>
        </el-form-item>
        <el-form-item label="下次追踪日期">
          <el-date-picker
            type="date"
            placeholder="请选择下次追踪日期"
            v-model="dialog.trackingForm.nextTrackTime"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
      </el-form>
      <el-form :model="dialog.trackingForm" label-width="140px" v-else>
        <el-form-item label="预约记录">
          <el-input
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 4 }"
            placeholder="请输入预约记录"
            v-model="dialog.reservationForm.appointmentRecord"
          />
        </el-form-item>
        <el-form-item label="预约时间">
          <el-date-picker
            type="datetime"
            placeholder="请选择预约时间"
            v-model="dialog.reservationForm.appointmentTime"
            value-format="yyyy-MM-dd HH:mm:ss"
          />
        </el-form-item>
        <el-form-item label="预计时间(分)">
          <el-input-number
            v-model="dialog.reservationForm.interviewTime"
            controls-position="right"
            :min="1"
          />
        </el-form-item>
        <el-form-item label="签约可能">
          <el-select
            v-model="dialog.reservationForm.isSign"
            placeholder="请选择签约可能"
            clearable
          >
            <el-option label="小" :value="0" />
            <el-option label="中" :value="1" />
            <el-option label="大" :value="2" />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleCreatRecord">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import _ from "lodash";
import moment from "moment";
import {
  customerDetail,
  addTracking,
  addRecord,
  delRecord,
  delTracking,
} from "@/api/leadManagement/leadClientList";
import campusSelect from "@/components/Select/campusSelect.vue";
import userSelect from "@/components/Select/userSelect.vue";

export default {
  data() {
    return {
      data: {},
      activeName: "first", // 默认激活的标签页

      dialog: {
        visible: false, // 控制对话框的显示与隐藏
        trackingForm: {}, // 追踪记录表单数据
        reservationForm: {},
        title: "", // 对话框标题
        type: "", // 对话框类型，"tracking" 或 "reservation"
      },
    };
  },
  components: {
    campusSelect,
    userSelect,
  },
  mounted() {
    const query = this.$route.query;
    if (query.id) this.getData(query.id);
  },
  methods: {
    getData(id) {
      customerDetail(id).then((res) => {
        if (res.code === 200) {
          this.data = {
            ...res.data,
            firstTime: moment(res.data.firstTime).format("YYYY-MM-DD"), // 格式化首次接触日期
          };
        } else {
          this.$message.error(res.msg || "获取客户信息失败");
        }
      });
    },

    handleCreat(type) {
      this.dialog.visible = true;
      this.dialog.type = type;
      this.dialog.title = type === "tracking" ? "新增追踪记录" : "新增预约记录";
    },

    pageGoEdit() {
      this.$router.push({
        path: "/leadManagement/edit",
        query: { id: this.data.customerId },
      });
    },

    handleCreatRecord() {
      if (this.dialog.type == "tracking") {
        addTracking({
          ...this.dialog.trackingForm,
          trackMethod: 0,
          customerId: this.$route.query.id,
        }).then((res) => {
          if (res.code === 200) {
            this.$message.success("追踪记录添加成功");
            this.dialog.visible = false;
            this.getData(this.data.customerId); // 刷新客户数据
          } else {
            this.$message.error(res.msg || "添加追踪记录失败");
          }
        });
      } else {
        addRecord({
          ...this.dialog.reservationForm,
          customerId: this.$route.query.id,
          interviewUnit: 1,
        }).then((res) => {
          if (res.code === 200) {
            this.$message.success("追踪记录添加成功");
            this.dialog.visible = false;
            this.getData(this.data.customerId); // 刷新客户数据
          } else {
            this.$message.error(res.msg || "添加追踪记录失败");
          }
        });
      }
    },

    handleClose() {
      this.dialog.visible = false;
      this.dialog.type = "";
      this.dialog.title = "";
      this.dialog.trackingForm = {};
      this.dialog.reservationForm = {};
    },

    handleDeleteRecord(id) {
      delRecord(id).then((res) => {
        if (res.code === 200) {
          this.$message.success("预约记录删除成功");
          this.getData(this.data.customerId); // 刷新客户数据
        } else {
          this.$message.error(res.msg || "删除预约记录失败");
        }
      });
    },

    handleDeleteTracking(id) {
      delTracking(id).then((res) => {
        if (res.code === 200) {
          this.$message.success("跟踪记录删除成功");
          this.getData(this.data.customerId); // 刷新客户数据
        } else {
          this.$message.error(res.msg || "删除跟踪记录失败");
        }
      });
    },
  },
};
</script>
<style scoped lang="scss"></style>
